<template>
<div>
  <BaseHeader class="baseHeader"></BaseHeader>
  <div class="partition">
    <div class="blogDetaii-container left" 
   >
    <div class="mblog"  v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    >
      <h1 class="title">{{ blog.title }}</h1>
      
      <div class="me-view-author">
        <a class="">
          <img class="me-header-picture" :src="author.avatar" />
        </a>
        <div class="me-view-info">
          <div class="me-view-meta">
            <span>{{author.username}}</span>
            <span style="margin-left: 10px; ">{{blog.createDate }}</span>
            <div>
              <span>阅读  &nbsp; {{blog.viewCounts}}</span>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;点赞  &nbsp; {{blog.likeCounts}}</span>
            </div>
          </div>
        </div>
      </div>
     
      <div class="operate" v-if="ownBlog">
             <el-button
              style=""
              size="mini"
              round
              ><el-link icon="el-icon-edit" ><router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}">编辑</router-link></el-link></el-button>
            <el-button
              style=""
              size="mini"
              round
              ><el-link icon="el-icon-delete"  v-if="ownBlog" class="deleteBtn" @click="open(blog.id)">删除</router-link></el-link></el-button>
      </div>
      <el-divider></el-divider>
      <div class="content markdown-body" v-html="blog.context"></div>
     
      <div class="me-view-end">
      <el-alert
        title="文章End..."
        type="success"
        center
        :closable="false">
      </el-alert>
        <div class="dianzan"><el-button type="info" class="iconfont icon-dianzan" circle @click="changered"></el-button></div>
    </div>
    </div>
  </div>
  <div class="right">
      <CardMe class="carme"></CardMe>
      <CardCategory @getHotData="getHotId($event)" class="cardcategory"></CardCategory>
      <CardHot class="cardhot"></CardHot>
  </div>
  </div>
  </div>
  </div>
</template>

<script>
import BaseHeader from "../components/BaseHeader.vue"
import 'highlight.js/styles/github.css'
import 'github-markdown-css'
import CardMe from '../components/card/CardMe.vue'
import CardCategory from '../components/card/CardCategory.vue'
import CardHot from '../components/card/CardHot.vue'
  export default {
    name: "BlogEdit.vue",
    components:{BaseHeader, CardMe, CardCategory, CardHot },
    data(){
        return {
        blog: {},
        ownBlog: false,
        author:{
          username:'安逸i',
          avatar:'http://www.ease.center/images/default.jpg'
        },
        loading: true,
      }
    },
    methods:{
      getBlog(){
      const _this = this
      this.$axios.get('/articles/' + this.$route.params.blogId).then((res) => {
        _this.blog = res.data.data;
        _this.loading = false;
        var hljs = require('highlight.js');
        var md = require('markdown-it')({
          html:         true,        // Enable HTML tags in source
          xhtmlOut:     true,        // Use '/' to close single tags (<br />).
                                      // This is only for full CommonMark compatibility.
          breaks:       true,        // Convert '\n' in paragraphs into <br>
          langPrefix:   'language-',  // CSS language prefix for fenced blocks. Can be
                                      // useful for external highlighters.
          linkify:      true,        // Autoconvert URL-like text to links

          // Enable some language-neutral replacement + quotes beautification
          // For the full list of replacements, see https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.js
          typographer:  true,

          // Double + single quotes replacement pairs, when typographer enabled,
          // and smartquotes on. Could be either a String or an Array.
          //
          // For example, you can use '«»„“' for Russian, '„“‚‘' for German,
          // and ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).
          quotes: '“”‘’',

          // Highlighter function. Should return escaped HTML,
          // or '' if the source string is not changed and should be escaped externally.
          // If result starts with <pre... internal wrapper is skipped.
          highlight: function (str,lang) {
              if (lang && hljs.getLanguage(lang)) {
                try {
                  return hljs.highlight(lang, str).value;
                } catch (__) {}
              }

              return ''; // 使用额外的默认转义
            },
            components: {
            core: {
              rules: [
                'normalize',
                'block',
                'inline'
              ]
            },

            block: {
              rules: [
                'blockquote',
                'code',
                'fence',
                'heading',
                'hr',
                'html_block',
                'lheading',
                'list',
                'reference',
                'paragraph'
              ]
            },

            inline: {
              rules: [
                'autolink',
                'backticks',
                'emphasis',
                'entity',
                'escape',
                'html_inline',
                'image',
                'link',
                'newline',
                'text'
              ],
              rules2: [
                'balance_pairs',
                'emphasis',
                'text_collapse'
              ]
            }
          }
        });
        if(_this.blog.context == null){
          _this.blog.context = "";
        }
        var result = md.render(_this.blog.context);
        _this.blog.context = result
       if(JSON.parse(sessionStorage.getItem("userinfo")) != null){
          _this.ownBlog =  (_this.blog.authorId === JSON.parse(sessionStorage.getItem("userinfo")).id)
       }
      })
      },
        open(id) {
        this.$confirm('是否删除这篇博客, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
      var _this = this;
        this.$axios.get("/articles/delete/" + id,{
          headers:{
             Authorization: localStorage.getItem('token'),
          }
        }).then((res)=>{
          _this.$alert('操作成功', '提示', {
          confirmButtonText: '确定',
          callback: (action) => {
            _this.$router.push('/index')
          },
        })
        })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      getUser(){
        if(sessionStorage.getItem("userinfo") !=null){
          this.author = JSON.parse(sessionStorage.getItem("userinfo"))
        }
      },
      getHotId(data){
        this.$router.push("/index")
      },
      changered(e){
       if( e.target.style.backgroundColor == "red"){
          this.$axios.get("/articles/likeSub/" + this.blog.id).then(function(res){
              e.target.style.backgroundColor = "";
          })
         
       }else{
          this.$axios.get("/articles/likeAdd/" + this.blog.id).then(function(res){
              e.target.style.backgroundColor = "red";
          })
       }
      }
    },
    created(){
      this.getUser();
      this.getBlog();
    }
  }
</script>

<style  scoped>
.left {
    box-sizing: border-box;
    height: 630px;
    position: relative;
    padding-right: 30px;
    padding-left: 30px;
}

.right {
  position: fixed;
  right:5%;
  width: 360px;
  padding-right: 10px;
  flex: 3;
}
.partition {
  margin: 0 auto;
  display: flex;
}
* {
  margin: 0;
  padding: 0;
}
.dianzan{
  margin-top: 20px;
  text-align: center;
  margin-right: 20px;
}
  .me-view-author {
    /*margin: 30px 0;*/
    margin-top: 30px;
    vertical-align: middle;
  }

  .me-view-picture {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 50%;
    vertical-align: middle;
    background-color: #5fb878;
  }

  .me-view-info {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
  }

  .me-view-meta {
    font-size: 12px;
    color: #969696;
  }


.me-view-end {
margin-top: 20px;
}
.mblog{
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  margin: 82px 64px;
  width: 927px; 
}
a{
  text-decoration: none;
}
.baseHeader{
  position: fixed;
  top: 0;
  z-index: 1024;
}
.carme {
  margin-top: 80px;
}
.cardcategory {
  margin-top: 30px;
}
.operate{
  margin:20px 0;
}

.content{
  margin-top: 20px!important;
  z-index: 1;

}


.cardhot{
  margin-top: 30px;
}

</style>